<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

</body>
<script>
    // 测试用例:
    // 1. ajax需要服务器环境 => live Server, HbuilderX => 本地启动的假服务 => 只能做前端页面展示,没有数据库
    // 2. ajax可以请求同服务器下的其他文件(GET) => 文件会返回文本内容
    // 3. 也可以借助现成的服务器 => 用现成的 


    // ajax请求流程:
    // 1. 创建http请求  => 请求的载体
    // 2. 配置请求相关的信息 
    // 3. 发送请求
    // 4. 绑定事件 监听xhr.readyState 改变 
    // 5. 获取响应的结果 并处理


    // xhr.readyState  请求的状态 => 通过此状态可以知道请求到达了哪个阶段
    // 0   请求未初始化,只是创建了请求,但是还未配置请求的相关信息
    // 1   配置请求的相关信息,但是请求还未发送
    // 2   请求已发送,服务器接收请求正在处理
    // 3   服务器接收请求正在处理,此时已经由部分数据可用
    // 4   服务器处理完毕,返回响应的结果 (响应的结果并不一定都是成功的)

    // xhr.status   响应状态码(一般是一个三位数)
    // 1**	信息，服务器收到请求，需要请求者继续执行操作
    // 2**	成功，操作被成功接收并处理
    // 3**	重定向，需要进一步的操作以完成请求
    // 4**	客户端错误，请求包含语法错误或无法完成请求
    // 5**	服务器错误，服务器在处理请求的过程中发生了错误

    // 200：ok，页面正确打开，并得到完整的响应内容。
    // 301：被请求的资源已永久移动到新位置
    // 302：请求的资源临时从不同的 URI响应请求
    // 304：缓存
    // 404：页面不存在。
    // 500：常指后端代码发生错误
    // 503：由于临时的服务器维护或者过载，服务器当前无法处理请求。


    // 1. 创建http请求  => 请求的载体
    var xhr = new XMLHttpRequest();
    // console.log(xhr);
    console.log(xhr.readyState);  // 0

    // 2. 配置请求相关的信息 
    // xhr.open(method,url,async)
    // method 请求方式  get/post/put/delete
    // url    请求地址
    // async  是否异步 (默认true: 异步  false:同步)

    xhr.open("get", "../data/1.json", true);
    console.log(xhr.readyState);  // 1

    // 3. 发送请求
    xhr.send();
    console.log(xhr.readyState);  // 1

    // 4. 绑定事件 监听xhr.readyState 改变 (页面加载时只做绑定,xhr.readyState状态改变时执行)
    xhr.onreadystatechange = function () {
        // 事件会执行三次 => 只找有结果的那一次
        console.log("readyState改变:", xhr.readyState);

        // xhr.readyState == 4 && xhr.status == 200  有结果 => 且结果也是成功的
        if (xhr.readyState == 4 && xhr.status == 200) {

            // 5. 获取响应的结果 并处理
            // 注意: 接口返回的内容可能是 文本 html结构 json字符串,如果确定接口返回的是json字符串 =>可以通过JSON.parse()解析数据 得到数组和对象
            var result = xhr.responseText; // 
            console.log("请求成功:", result);
        }
    }

    console.log(11111, xhr.responseText);










</script>

</html>